<template>
<div id="card">
    <div class="diver" id="card-img">
        <van-image width="70" height="100" src="http://47.99.166.157/book/res/img//ComputerScience/2016_Book_NewHorizonsForAData-DrivenEcon.jpeg" />
    </div>

    <div class="diver" id="card-text">
        <div class="diver">
            <strong >{{bookName}}</strong>
            <br><br>
            <div class="small" >{{author}}|推荐值99%</div>
            
        </div>
    </div>

    <!-- <van-button  icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" round type="primary" size="mini" style="float:right" color="rgb(246, 246, 246)">
            1.8w
        </van-button> -->
<van-tag id="btn" color="rgb(204, 204, 204)" round plain type="primary">1.8w</van-tag>

</div>
<van-divider
  :style="{  borderColor: 'rgb(204, 204, 204)', padding: '0 16px' }"
>
</van-divider>


</template>

<script>
import { ref } from '@vue/reactivity'


export default{
    setup() {
        const bookName = ref('三体')
        const author =ref('刘慈欣')
        return {
            bookName,author
        }
    },
}
</script>

<style>
.diver{
    display:inline-block;
    margin-left: 20px;
}
.small{
    font-weight: 100;
    font-size:2px
}
#card{
    margin: 0px;
}
#card-text{
    position:absolute;
    margin-left: 0;
    margin-top: 20px;
}
#btn{
    float:right;
    
    margin-right: 15px;
   
}
</style>